<template>
  <div class="register">
    <van-icon name="cross" @click="close" />
    <span class="mobile-van">手机号登录</span>
    <div class="register-login">登录体验更多精彩</div>
    <div class="register-re">未注册手机号登录后将自动创建账号</div>
    <van-form ref="login">
      <van-field
        v-model="user.mobile"
        name="mobile"
        maxlength="11"
        label="手机号"
        type="number"
        @blur="onblur"
        @input="onblur"
        placeholder="请输入手机号"
        :rules="userFormRules.mobile"
      >
      </van-field>

      <div style="margin: 16px;">
        <van-button
          round
          block
          type="info"
          native-type="submit"
          color="red"
          :disabled="btn"
          @click="next"
          >下一步</van-button
        >
      </div>
    </van-form>
  </div>
</template>
<script>
// import { Login } from '@/api/login'
export default {
  data () {
    return {
      btn: true,
      f: false,
      user: {
        mobile: '' // 手机号
      },
      userFormRules: {
        mobile: [
          {
            required: true,
            message: '请填写手机号'
          },
          {
            pattern: /^1[3|5|7|8]\d{9}/,
            message: '手机号格式错误'
          }
        ]
      }
    }
  },
  methods: {
    async onblur () {
      this.$refs.login.validate('mobile')
      const pattern = /^1[3|5|7|8]\d{9}/
      this.f = pattern.test(this.user.mobile)
      if (this.f) {
        this.btn = false
      } else {
        this.btn = true
      }
      // console.log(this.f)
    },
    async next () {
      this.$store.commit('mobileNext', this.user.mobile)
      // const phone = this.user.mobile
      // await Login(phone)
      this.$router.push('/password-login')
    },
    close () {
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped lang="less">
.register {
  padding: 60px;
  .mobile-van {
    display: block;
    font-size: 40px;
    text-align: center;
  }
  .register-login {
    padding-top: 60px;
    font-size: 40px;
  }
  .register-re {
    padding-top: 18px;
    font-size: 30px;
    color: rgb(139, 129, 129);
  }
}
</style>
